<template>
  <div class="borrowed-equipment">
    <div class="page-header">
      <h2>已借器材</h2>
      <div class="header-actions">
        <el-input
          v-model="searchQuery"
          placeholder="搜索器材"
          class="search-input"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <el-table :data="borrowedList" style="width: 100%">
      <el-table-column prop="id" label="借用编号" width="120" />
      <el-table-column prop="equipment" label="器材名称" width="150" />
      <el-table-column prop="borrower" label="借用人" width="120" />
      <el-table-column prop="borrowTime" label="借用时间" width="180" />
      <el-table-column prop="expectedReturn" label="预计归还时间" width="180" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleReturn(scope.row)"
          >
            归还
          </el-button>
          <el-button
            type="warning"
            size="small"
            @click="handleExtend(scope.row)"
          >
            延期
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next"
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      v-model="extendDialogVisible"
      title="延期申请"
      width="400px"
    >
      <el-form :model="extendForm" label-width="100px">
        <el-form-item label="延期天数">
          <el-input-number v-model="extendForm.days" :min="1" :max="30" />
        </el-form-item>
        <el-form-item label="延期原因">
          <el-input
            v-model="extendForm.reason"
            type="textarea"
            rows="3"
            placeholder="请输入延期原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="extendDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitExtend">
            提交申请
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const extendDialogVisible = ref(false)

const borrowedList = ref([
  {
    id: 'B001',
    equipment: '显微镜',
    borrower: '张三',
    borrowTime: '2024-12-01 09:30',
    expectedReturn: '2024-12-15 09:30',
    status: '正常'
  },
  {
    id: 'B002',
    equipment: '烧杯',
    borrower: '李四',
    borrowTime: '2024-12-05 14:20',
    expectedReturn: '2024-12-19 14:20',
    status: '即将到期'
  }
])

const extendForm = ref({
  days: 7,
  reason: ''
})

const handleReturn = (row) => {
  ElMessageBox.confirm(
    '确认归还该器材？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(() => {
    ElMessage.success('归还成功')
  })
}

const handleExtend = (row) => {
  extendDialogVisible.value = true
}

const submitExtend = () => {
  ElMessage.success('延期申请提交成功')
  extendDialogVisible.value = false
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped>
.borrowed-equipment {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>

